<template>

    <view>

        <view class="cu-bar bg-white solid-bottom margin-top">
            <view class="action">
                <text class="cuIcon-title text-blue"></text>
                更多功能
            </view>
        </view>

        <view class="cu-list grid col-3">
            <view class="cu-item" @tap="goToPage" data-url="/pages/association/list/list">
                <view class="cuIcon-peoplelist text-olive">
                </view>
                <text>社团组织</text>
            </view>
            <view class="cu-item" @tap="exportGrade">
                <view class="cuIcon-choiceness text-yellow">
                </view>
                <text>奖学金佐证材料</text>
            </view>
            <view class="cu-item">
                <view class="cuIcon-apps text-gray">
                </view>
                <text>待更新...</text>
            </view>

        </view>

        <view class="cu-card dynamic">
            <view class="cu-item shadow"
                  style="border-radius: 10px!important;margin-left: 5px!important;margin-right: 5px!important;">
                <view class="grid cu-form-group padding-bottom-xs padding-top-xs">
                    <view class="text-left text-xl">今日课程</view>
                    <view class="text-center">{{ data.day }}</view>
                    <view class="text-right">第{{ data.week }}周</view>
                </view>
            </view>
            <view v-if="data.data && data.data.length===0" class="cu-item shadow"
                  style="margin-bottom: 2px!important;margin-top: 2px!important; border-radius: 8px!important">
                <view style="height: 300rpx;" class="flex cu-form-group">
                    <view class="text-center flex-sub">今日没课喔！！！</view>
                </view>
            </view>


            <view v-for="(tableDatum,index) in data.data" :key="index" class="cu-item shadow"
                  style="margin-bottom: 2px!important;margin-top: 2px!important; border-radius: 8px!important">
                <view class="grid cu-form-group">
                    <view style="width: 13%;">
                        <view class="flex text-gray margin-bottom-xs text-sm justify-around">
                            {{ tableDatum.fromTime }}
                        </view>
                        <view class="flex text-gray text-sm justify-around">
                            {{ tableDatum.toTime }}
                        </view>
                    </view>

                    <view class="colorTiao" :class="'bg-'+color[index%6]"></view>
                    <view style="width: 75%;margin-left: 5%;">
                        <view class="text-left text-lg justify-around">
                            {{ tableDatum.subject }}
                        </view>
                        <view class="text-gray text-xs  justify-around">
                            {{ tableDatum.section }} | {{ tableDatum.classroom }}|{{ tableDatum.teacher }}
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <MxDatepicker
            :show="showPicker"
            type="range"
            format="yyyy-mm-dd"
            :value="value"
            :show-tips="true"
            :begin-text="'学期开始日期'"
            :end-text="'学期结束日期'"
            @confirm="confirm"
            @cancel="cancel"
        />
        <view class="cu-bar bg-white solid-bottom margin-top">
            <view class="action">
                <text class="cuIcon-title text-orange"></text>
                <text class="text-black">校园头条</text>
            </view>
        </view>
        <uni-card v-for="(item,index) in noticeList" :key="index" :title="item.title" @click="showNotice(item.notice_id)">

            <view class="row">
                <text class="uni-body">{{ item.content }}</text>
            </view>
            <view class="row">
                <img v-if="item.url != null" class="bg-img only-img card-img" :src="item.url"/>
            </view>
            <view class="row text-right">
                <text class="text-gray">----{{ item.association_name }}</text>
            </view>
        </uni-card>


    </view>


</template>


<script>
import UniCard from "../../uni_modules/uni-card/components/uni-card/uni-card";
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons";
import UniTd from "../../uni_modules/uni-table/components/uni-td/uni-td";
import TableCheckbox from "../../uni_modules/uni-table/components/uni-tr/table-checkbox";
import MxDatepicker from "../../components/mx-datepicker/mx-datepicker";

const app = getApp();

export default {
    components: {MxDatepicker, TableCheckbox, UniTd, UniIcons, UniCard},
    data() {
        return {
            color: ["blue", "orange", "yellow", "cyan", "green", "mauve"],
            data: {
                week: 9,
                day: "星期一",
                data: []
            },
            noticeList: [{
                notice_id: -1,
                content:"",//文章内容
                title:"",//文章标题
                association_name:"",//社团名称
                url:"",//图片链接
                create_time:"",//发布时间
            }],
            showPicker: false,
            value: [new Date(), new Date()]
        }
    },
    onShow() {

        // let that = this;
        // setTimeout(function(){
        // 	that.request();
        // },1000);

    },
    onLoad() {
        this.request();
    },
    onPullDownRefresh() {
        this.request();
        uni.stopPullDownRefresh();
    },
    methods: {
        goToPage(e) {
            console.log(e);

            uni.navigateTo({
                url: e.currentTarget.dataset.url
            });
        },
        request() {
            let that = this;
            uni.showLoading({
                title: "加载中"
            });
            that.setData({
                data: uni.getStorageSync("TodayData")
            });

            this.$myFunction.getData(app.globalData.ApiUrl + 'api/Android/getTodayTable', {
                "SafeCode": uni.getStorageSync("SafeCode")
            }).then(res => {

                uni.hideLoading();

                if (res.code && res.code == '2') {

                    uni.showToast({
                        title: '您的学校系统版本过老，需要手动更新学期开始和结束时间，请正确设置，否则程序将会出现异常！',
                        icon: 'none',
                        duration: 4000
                    });

                    //弹窗
                    that.showPicker = true;
                    return;
                }

                console.log("获取今日课程成功：");
                console.log(res);

                that.setData({
                    data: res
                });
                uni.setStorageSync("TodayData", res);
            });

            this.$myFunction.getData(app.globalData.ApiUrl + 'api/Android/showNoticeList', {
                "SafeCode": uni.getStorageSync("SafeCode")
            }).then(res => {

                if (res.code == 1){
                    this.noticeList = res.data;
                }

            });

            this.$myFunction.uploadCalendar().then(res => {

                that.$myFunction.getData(app.globalData.ApiUrl + 'api/Android/setCalendar', {
                    data: res,
                    SafeCode: uni.getStorageSync('SafeCode')
                }).then(
                    (msg) => {
                        if (msg.result && msg.result === 'success') {
                            console.log("日历上传成功");
                        } else {
                            console.log("日历上传失败");
                        }
                    }
                );
            });

        },
        confirm(e) {
            let fromData = e.value[0];
            let toData = e.value[1];
            let SafeCode = uni.getStorageSync("SafeCode");
            let that = this;

            /**
             * 设置当前学年的开始日期和结束日期
             */
            this.$myFunction.getData(app.globalData.ApiUrl + 'api/Android/setTime', {
                "SafeCode": SafeCode,
                "startTime": fromData,
                "endTime": toData
            }).then(res => {
                console.log(res);
                if (res.code !== undefined && res.code == 0) {
                    uni.showToast({
                        title: '设置成功',
                        icon: 'none',
                        duration: 2000
                    });

                    that.showPicker = false
                    that.request();
                } else {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none',
                        duration: 2000
                    });
                }
            });


        },
        cancel() {
            uni.showToast({
                title: '请选择学期开始日期和结束日期，否则程序无法运行',
                icon: 'none'
            });
        },
        showNotice(id) {
            uni.navigateTo({
                url: '/pages/notice/notice?id=' + id
            });
        },
        exportGrade(){
            uni.downloadFile({
                url: app.globalData.ApiUrl + 'api/Android/exportGrade?SafeCode=' + uni.getStorageSync("SafeCode"),
                header: {
                    'SafeCode': uni.getStorageSync('SafeCode')
                },
                success: function (res) {
                    console.log(res);
                    if (res.statusCode === 200) {
                        uni.saveFile({
                            tempFilePath: res.tempFilePath,
                            success: function (res) {
                                uni.showToast({
                                    title: '导出成功',
                                    icon: 'none',
                                    duration: 2000
                                });
                                uni.openDocument({
                                    filePath: res.savedFilePath,
                                    success: function (res) {
                                        console.log('打开文档成功')
                                    }
                                });
                            }
                        });
                    }
                }
            });
        }
    }
}
</script>

<style>
.colorTiao {
    width: 7rpx;
    border-radius: 10rpx;
    height: 80rpx;
}
.card-img{
    max-width:320px;
    max-height: 180px;
}
</style>
